<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in list"
        @click="toPath(item.to, index)"
        class="flex items-center justify-start group my-[10px] text-[#64748b] text-[14px] cursor-pointer"
        :class="{ 'active text-primary font-semibold': index == activeIndex }"
      >
        <div
          class="flex items-center justify-center w-[25px] h-[25px] group-[.active]:bg-primary group-hover:bg-primary mx-[10px] bg-gray-100 shadow-lg rounded-md border border-gray-200"
        >
          <UIcon
            class="text-16px group-hover:text-[#fff] group-[.active]:text-[#fff]"
            :name="item.icon"
          ></UIcon>
        </div>
        <span class="group-[.active]:text-primary">{{ item.lable }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const list = [
  {
    icon: 'i-material-symbols-bookmarks-outline',
    lable: '开始使用',
    to: '/docs/exp',
  },
  {
    icon: 'i-material-symbols-bookmarks-outline',
    lable: '问题',
    to: '/docs/question',
  },
  {
    icon: 'i-material-symbols-bookmarks-outline',
    lable: 'API',
    to: '/docs/exp1',
  },
  {
    icon: 'i-material-symbols-bookmarks-outline',
    lable: '示例',
    to: '',
  },
  {
    icon: 'i-material-symbols-bookmarks-outline',
    lable: '社区',
    to: '',
  },
]
const curPath = useRoute().path
const activeIndex = ref(0)
function toPath(to: string, index: number) {
  activeIndex.value = index
  navigateTo(to)
}
</script>

<style scoped></style>
